<template>
	<view class="main goodsPayment-main">
		<NavigationBar title="确认订单" />
		<scroll-view class="scroll-wrap" scroll-y="true">
			<view class="box address-box">
				<view class="address-content" @click="jumpAddressAction">
					<text class="iconfont address-icon">&#xe606;</text>
					<view class="center">
						<view class="address">福建省厦门市思明区莲前街道小Q讲Office创想中心A座</view>
						<view class="name-phone">张三  18259715568</view>
					</view>
					<view class="flex-center">
						<text class="iconfont rigt-arrow-icon">&#xe60a;</text>
					</view>
				</view>
				<image class="shop_order_address-img" src="../../static/images/shop_order_address.png" ></image>
			</view>
			<view class="box goodsInfo-box">
				<view class="goods-list">
					<view class="list-item b-b" v-for="(item,index) in goodsList" v-if="index<goodsShowIndex">
						<image class="goods-avator" src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657049599668876.jpg"></image>
						<view class="info-right">
							<view class="goods-name">曼秀雷敦什果冰润唇膏滋润嘴唇保湿女男士（演示商品 不发货）</view>
							<view class="goods-specs">【果汁清香】青提+葡萄</view>
							<view class="goods-price">￥888 x 1</view>
						</view>
					</view>
				</view>
				<view class="goods-more" @click="goodsMoreAction" v-if="goodsList.length>3">
					<view v-if="goodsShowIndex==3">
						<text>查看更多</text><text class="iconfont down--arrow-icon">&#xe61e;</text>
					</view>
					<view v-else>
						<text>隐藏更多</text><text class="iconfont down--arrow-icon">&#xe60e;</text>
					</view>
				</view>
				<view class="cell">
					<view class="cell-row">
						<text class="label">商品金额</text>
						<text class="text">￥888</text>
					</view>
					<view class="cell-row">
						<text class="label">
							<text class="iconfont reduce-icon">&#xe642;</text>订单满减
						</text>
						<text class="text">-￥222</text>
					</view>
					<view class="cell-row">
						<text class="label">
							<text class="iconfont coupons-icon">&#xe6b0;</text>优惠券
						</text>
						<text class="text diabled">暂无可用</text>
					</view>
					<view class="cell-row">
						<text class="label">配送费</text>
						<text class="text">￥0</text>
					</view>
					<view class="subtotal b-b">小计：￥666</view>
				</view>
			</view>
			<view class="box remarks-box">
				<view class="title">订单备注：</view>
				<textarea class="remarks-content" @blur="bindTextAreaBlur" placeholder="选填,合理需求我们会尽力满足的哦..." auto-height />
			</view>
		</scroll-view>
		<view class="footer-wrap">
			<view class="price">
				<text class="label">实付款：</text><text class="text">￥666</text>
			</view>
			<button type="warn" class="submit-btn" size="mini">提交订单</button>
		</view>
	</view>
</template>

<script>
	import util from '@/static/js/util';
	export default {
		data() {
			return {
				goodsList: [0,1,2,3],
				goodsShowIndex: 3
			}
		},
		methods: {
			jumpAddressAction: function() {
				util.jumpPage('/pages/addressList/addressList')
			},
			goodsMoreAction: function () {
				this.goodsShowIndex = this.goodsShowIndex == 3 ? this.goodsList.length : 3
			},
			bindTextAreaBlur: function (e) {
				console.log(e.detail.value)
			}
		}
	}
</script>

<style lang="scss">
	@import "./goodsPayment.scss";
</style>
